// author candyAndy_mtt
// 2020/8/17
// base jquery-3.5.1

// 立即执行函数   --避免对全局污染
;(function ($) {
	$.extend({
		// option  可以只传一个字符串，表示弹框内容；传入一个对象，含有字符串和type属性
			// title表示弹框内容   type表示更换皮肤类型 
		mttAlert( option ){
			/* 判断传入参数是字符串还是对象，字符串是只传入了警告内容，type皮肤为默认，不更改 */
			if(typeof option === "string"){
				var title = option;
				var type = 'default';
			}else{
				var { title, type = 'default' } = option;
			}
			// 添加点击事件，要在弹出框添加到页面之后，原本没有能进行操作的元素
			$( `
			<div id="big">
				<div class="warning">
					<p>
						<span>警告</span>
						<span id="del">x</span>
					</p>
					<p>${title}</p>
					<div>
						<button type="button" id = "toSure">确认</button>
						<button type="button" id = "toCancel">取消</button>
					</div>
				</div>
			</div>
			`).appendTo(document.body).find(".warning p span:last-child, #toSure, #toCancel").on("click", function(){
				// console.log($(this)) // 点击的jQuery对象
				if($(this).is("#del")){
					// 移除警告框
					$(this).parents("#big").remove();
				}else if($(this).is("#toSure")){
					// 皮肤   --传入参数是对象的情况
					if( typeof option === "object" ){
						if(type === 'default'){
							// 默认不传type的参数的情况
						$(".warning").css("backgroundColor", "rgba(" + Math.random()*256 + "," + Math.random()*256 + "," + Math.random()*256 + ",1)");
						}else{
							// 可以写一个对象，专门存储
							$(".warning").css("backgroundColor", type);
						}
					}else{
						// 只传入字符串，不更改皮肤的情况
						$(this).parents("#big").remove();						
					}
				}else if($(this).is("#toCancel")){
					// 移除警告框
					$(this).parents("#big").remove();
				}
			})
			$("#big .warning").draggable({
				 containment: "parent",
				 // 设置拖动时的不透明度
				 opacity: 0.35,
				 // 拖动结束后恢复到原位
				 revert: true
			})
		}
	})
})(jQuery);